<template>
  <div id="map">

  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, watch, ref } from 'vue';
import ChinaJSON from '../../public/MapJSON/China.json'
import jiantou from '../assets/jiantou.png'
// 接受props
const props = defineProps({
  dataGeo: { type: Array, default: () => [] }
})
// dataGeo变化时，刷新地图
watch(props.dataGeo, (n, o) => {
  n && myChart.value.setOption(mapOptions)
})
// 注册自定义事件,
// map-click:geo地图区域点击触发
// mark-click:series标记点击触发
const emits = defineEmits(['map-click', 'mark-click'])
const mapOptions = {
  // title: {
  //   text: '标记地图'
  // },
  color: ['#5470c6'],
  tooltip: {
    trigger: 'item',
    renderMode: 'html',
    // 触发方式
    triggerOn: 'mousemove',
    enterable: true,
    backgroundColor: '#fff',
    padding: 0,
    textStyle: {
      color: '#000',
      fontSize: '12'
    },
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
  },
  dispatchAction: {
    type: 'downplay'
  },
  roam: false,
  roamController: {
    show: true,
    x: 'right',
    mapTypeControl: {
      china: true
    }
  },
  series: [
    // 标记
    {
      name: 'longitudeAndLatitude',
      type: 'scatter',
      coordinateSystem: 'geo',
      symbol: `image://${jiantou}`,//使用图片标记点
      symbolSize: [12, 16],
      symbolOffset: [0, '-50%'],
      tooltip: {
        alwaysShowContent: true,
        position: "right",
        color: "#000",
        formatter(d) {
          return `<div style="padding: 10px 20px;text-align:left;">经度：${d.data.value?.[0] ?? '暂无数据'}<br>纬度：${d.data.value?.[1] ?? '暂无数据'}</div>`;
        },
      },
      data: props.dataGeo,
    }],
  // 地图
  geo: {
    show: true,
    map: 'China',
    type: 'map',
    mapType: 'China',
    roam: false,
    label: {
      normal: {
        // 显示省份标签
        show: false,
        textStyle: {
          color: '#fff',
          fontSize: 10
        }
      },
      emphasis: {
        // 对应的鼠标悬浮效果
        show: true,
        // 选中后的字体样式
        textStyle: {
          color: '#000',
          fontSize: 14
        }
      }
    },
    itemStyle: {
      color: '#ddb926',
      normal: {
        areaColor: '#8abcd1',
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        borderWidth: 0.5,
        borderColor: '#8abcd1',
        areaColor: '#fff'
      }
    },
    emphasis: {
      label: {
        show: false
      }
    }
  }
}
let myChart = ref(null)
// 在组件根dom挂载后加载echarts
onMounted(() => {
  echarts.registerMap('China', ChinaJSON, {});
  // 初始化
  myChart.value = echarts.init(document.getElementById('map'));
  myChart.value.setOption(mapOptions)
  // 优化resize
  window.addEventListener('resize', () => {
    myChart.value.resize()
  })
  // 添加点击事件
  myChart.value.on('click', ({ componentType, event, data }) => {
    //点击geo区域
    if (componentType === 'geo') {
      // 把点的位置转换为经纬度
      const longitudeAndLatitude = myChart.value.convertFromPixel('geo', [event.offsetX, event.offsetY])
        .map(item => item.toFixed(6))//精确6位小数
      emits('map-click', { value: longitudeAndLatitude })
    }
    // 点击series区域
    if (componentType === 'series') {
      emits('mark-click', data)
    }
  })
})

</script>

<style scoped>
#map {
  width: 100%;
  flex: 1;
}
</style>